<script setup lang="ts">
import {reactive, ref} from "vue";
import type {orderCreateRequest, orderCreateResponse} from "@/api/order_api";
import F_money from "@/components/common/f_money.vue";
import {orderCreateApi} from "@/api/order_api";
import {Message} from "@arco-design/web-vue";
import F_pay_modal from "@/components/common/f_pay_modal.vue";
import {useRouter} from "vue-router";

const router = useRouter()
const form = reactive<orderCreateRequest>({
  payType: 1,
  price: 100,
})

const priceList = [
  {
    price: 100,
    scope: 100,
  },
  {
    price: 500,
    scope: 600,
  },
  {
    price: 1000,
    scope: 2000,
  }
]

const visible = ref(false)
const order = reactive<orderCreateResponse>({
  no: "",
  payUrl: "",
  price: 0,
})

async function pay() {
  const res = await orderCreateApi(form)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  Object.assign(order, res.data)
  visible.value = true
  return
}

function success() {
  router.push({
    name: "myOrderList"
  })
}

</script>

<template>
  <div class="f_scope_recharge_view">
    <f_pay_modal v-model:visible="visible" :order="order" @success="success"></f_pay_modal>
    <a-form :model="form" :label-col-props="{span: 3}" :wrapper-col-props="{span: 21}">
      <a-form-item label="充值金额">
        <a-radio-group v-model="form.price">
          <a-radio :value="item.price" v-for="item in priceList">
            <div class="item">
              <div class="label">
                <span>积分</span>
                <span class="scope">{{ item.scope }}</span>
              </div>
              <div class="money">
                <f_money :money="item.price"></f_money>
              </div>
            </div>
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="支付方式">
        <a-radio-group class="pay_type_radio" v-model="form.payType">
          <a-radio :value="1">
            <img src="@/assets/icon/ali_pay.svg" alt="">
            支付宝支付
          </a-radio>
          <a-radio disabled :value="2">
            <img src="@/assets/icon/wx_pay.svg" alt="">
            微信支付
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="pay">下单</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style lang="less">
.f_scope_recharge_view {
  .arco-form {
    width: 800px;

    .arco-radio {
      padding: 20px 30px;
      border: @f_border;
      border-radius: 5px;

      .item {
        .scope {
          font-size: 26px;
          color: rgb(var(--primary-6));
          font-weight: 600;
          margin-left: 5px;
        }

        .money {
          color: #f9a20f;
          font-size: 20px;
          text-align: center;
          margin-top: 10px;
        }
      }
    }

    .pay_type_radio {
      .arco-radio-label {
        display: flex;
        align-items: center;
      }

      img {
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
    }
  }
}

</style>